<template>
  <div class="icon-replace-guide">
    <a-card title="📖 Iconify 图标替换指南" class="guide-card">
      
      <!-- 步骤指南 -->
      <div class="steps-section">
        <a-steps :current="currentStep" direction="vertical">
          <a-step title="安装依赖">
            <template #description>
              <div class="step-content">
                <p>首先安装 Iconify 相关依赖包：</p>
                <a-typography-paragraph copyable>
                  <pre>npm install @iconify/vue @iconify/icons-material-symbols</pre>
                </a-typography-paragraph>
                <a-alert message="✅ 已完成" type="success" show-icon />
              </div>
            </template>
          </a-step>
          
          <a-step title="注册组件">
            <template #description>
              <div class="step-content">
                <p>在 main.js 中全局注册 Icon 组件：</p>
                <a-typography-paragraph copyable>
                  <pre>import { Icon } from '@iconify/vue'
app.component('Icon', Icon)</pre>
                </a-typography-paragraph>
                <a-alert message="✅ 已完成" type="success" show-icon />
              </div>
            </template>
          </a-step>
          
          <a-step title="替换图标">
            <template #description>
              <div class="step-content">
                <p>将原有的 Ant Design 图标替换为 Iconify 图标：</p>
                <div class="replacement-examples">
                  
                  <div class="example-item">
                    <h4>🔍 搜索图标</h4>
                    <div class="code-comparison">
                      <div class="before">
                        <h5>替换前：</h5>
                        <a-typography-paragraph copyable>
                          <pre>&lt;SearchOutlined /&gt;</pre>
                        </a-typography-paragraph>
                      </div>
                      <div class="after">
                        <h5>替换后：</h5>
                        <a-typography-paragraph copyable>
                          <pre>&lt;Icon icon="material-symbols:search" /&gt;</pre>
                        </a-typography-paragraph>
                      </div>
                    </div>
                    <div class="visual-comparison">
                      <SearchOutlined style="font-size: 20px; margin-right: 16px;" />
                      <Icon icon="material-symbols:search" style="font-size: 20px;" />
                    </div>
                  </div>

                  <div class="example-item">
                    <h4>➕ 添加图标</h4>
                    <div class="code-comparison">
                      <div class="before">
                        <h5>替换前：</h5>
                        <a-typography-paragraph copyable>
                          <pre>&lt;PlusOutlined /&gt;</pre>
                        </a-typography-paragraph>
                      </div>
                      <div class="after">
                        <h5>替换后：</h5>
                        <a-typography-paragraph copyable>
                          <pre>&lt;Icon icon="material-symbols:add" /&gt;</pre>
                        </a-typography-paragraph>
                      </div>
                    </div>
                    <div class="visual-comparison">
                      <PlusOutlined style="font-size: 20px; margin-right: 16px;" />
                      <Icon icon="material-symbols:add" style="font-size: 20px;" />
                    </div>
                  </div>

                  <div class="example-item">
                    <h4>🗑️ 删除图标</h4>
                    <div class="code-comparison">
                      <div class="before">
                        <h5>替换前：</h5>
                        <a-typography-paragraph copyable>
                          <pre>&lt;DeleteOutlined /&gt;</pre>
                        </a-typography-paragraph>
                      </div>
                      <div class="after">
                        <h5>替换后：</h5>
                        <a-typography-paragraph copyable>
                          <pre>&lt;Icon icon="material-symbols:delete" /&gt;</pre>
                        </a-typography-paragraph>
                      </div>
                    </div>
                    <div class="visual-comparison">
                      <DeleteOutlined style="font-size: 20px; margin-right: 16px;" />
                      <Icon icon="material-symbols:delete" style="font-size: 20px;" />
                    </div>
                  </div>

                </div>
              </div>
            </template>
          </a-step>
          
          <a-step title="清理导入">
            <template #description>
              <div class="step-content">
                <p>删除不再需要的 Ant Design 图标导入：</p>
                <div class="code-comparison">
                  <div class="before">
                    <h5>替换前：</h5>
                    <a-typography-paragraph copyable>
                      <pre>import {
  SearchOutlined,
  PlusOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'</pre>
                    </a-typography-paragraph>
                  </div>
                  <div class="after">
                    <h5>替换后：</h5>
                    <a-typography-paragraph copyable>
                      <pre>// 不需要导入，直接使用 &lt;Icon /&gt;</pre>
                    </a-typography-paragraph>
                  </div>
                </div>
              </div>
            </template>
          </a-step>
        </a-steps>
      </div>

      <!-- 常用图标对照表 -->
      <div class="icon-mapping-section">
        <h3>🔄 常用图标对照表</h3>
        <a-table 
          :columns="mappingColumns" 
          :data-source="iconMappings" 
          :pagination="false"
          size="small"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'antIcon'">
              <component :is="record.antComponent" style="font-size: 18px;" />
            </template>
            <template v-else-if="column.key === 'iconifyIcon'">
              <Icon :icon="record.iconifyName" style="font-size: 18px;" />
            </template>
            <template v-else-if="column.key === 'iconifyCode'">
              <a-typography-text copyable>{{ record.iconifyCode }}</a-typography-text>
            </template>
          </template>
        </a-table>
      </div>

      <!-- 优势说明 -->
      <div class="advantages-section">
        <h3>✨ 使用 Iconify 的优势</h3>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card size="small">
              <div class="advantage-item">
                <Icon icon="material-symbols:palette" style="font-size: 32px; color: #1890ff;" />
                <h4>丰富的图标库</h4>
                <p>支持 100+ 图标集，超过 10 万个图标可选择</p>
              </div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card size="small">
              <div class="advantage-item">
                <Icon icon="material-symbols:speed" style="font-size: 32px; color: #52c41a;" />
                <h4>按需加载</h4>
                <p>只加载使用的图标，减少包体积</p>
              </div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card size="small">
              <div class="advantage-item">
                <Icon icon="material-symbols:code" style="font-size: 32px; color: #faad14;" />
                <h4>统一接口</h4>
                <p>使用统一的语法，易于维护</p>
              </div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card size="small">
              <div class="advantage-item">
                <Icon icon="material-symbols:high-quality" style="font-size: 32px; color: #722ed1;" />
                <h4>高质量 SVG</h4>
                <p>矢量图标，在任何分辨率下都清晰</p>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <a-space>
          <a-button type="primary" @click="nextStep" :disabled="currentStep >= 3">
            下一步
          </a-button>
          <a-button @click="prevStep" :disabled="currentStep <= 0">
            上一步
          </a-button>
          <a-button @click="openIconifyWebsite">
            浏览图标库
          </a-button>
        </a-space>
      </div>

    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { SearchOutlined, PlusOutlined, DeleteOutlined, ImportOutlined, ExportOutlined, TeamOutlined } from '@ant-design/icons-vue'

const currentStep = ref(2)

const nextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

const openIconifyWebsite = () => {
  window.open('https://icon-sets.iconify.design/', '_blank')
}

// 图标对照表数据
const mappingColumns = [
  { title: 'Ant Design 图标', dataIndex: 'antName', key: 'antIcon', width: 150 },
  { title: '预览', dataIndex: 'antIcon', key: 'antIcon', width: 80 },
  { title: 'Iconify 图标', dataIndex: 'iconifyName', key: 'iconifyIcon', width: 80 },
  { title: 'Iconify 代码', dataIndex: 'iconifyCode', key: 'iconifyCode' }
]

const iconMappings = [
  { 
    antName: 'SearchOutlined', 
    antComponent: SearchOutlined,
    iconifyName: 'material-symbols:search',
    iconifyCode: '<Icon icon="material-symbols:search" />'
  },
  { 
    antName: 'PlusOutlined', 
    antComponent: PlusOutlined,
    iconifyName: 'material-symbols:add',
    iconifyCode: '<Icon icon="material-symbols:add" />'
  },
  { 
    antName: 'DeleteOutlined', 
    antComponent: DeleteOutlined,
    iconifyName: 'material-symbols:delete',
    iconifyCode: '<Icon icon="material-symbols:delete" />'
  },
  { 
    antName: 'ImportOutlined', 
    antComponent: ImportOutlined,
    iconifyName: 'material-symbols:upload',
    iconifyCode: '<Icon icon="material-symbols:upload" />'
  },
  { 
    antName: 'ExportOutlined', 
    antComponent: ExportOutlined,
    iconifyName: 'material-symbols:download',
    iconifyCode: '<Icon icon="material-symbols:download" />'
  },
  { 
    antName: 'TeamOutlined', 
    antComponent: TeamOutlined,
    iconifyName: 'material-symbols:team-dashboard',
    iconifyCode: '<Icon icon="material-symbols:team-dashboard" />'
  }
]
</script>

<style scoped>
.icon-replace-guide {
  padding: 20px;
}

.guide-card {
  max-width: 1000px;
  margin: 0 auto;
}

.steps-section {
  margin-bottom: 40px;
}

.step-content {
  margin-top: 16px;
}

.step-content pre {
  background: #f6f8fa;
  padding: 12px;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.replacement-examples {
  margin-top: 16px;
}

.example-item {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.example-item h4 {
  margin-bottom: 12px;
  color: #1890ff;
}

.code-comparison {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.before, .after {
  flex: 1;
}

.before h5, .after h5 {
  margin-bottom: 8px;
  color: #262626;
}

.visual-comparison {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
}

.icon-mapping-section {
  margin-bottom: 40px;
}

.icon-mapping-section h3 {
  margin-bottom: 16px;
  color: #1890ff;
}

.advantages-section {
  margin-bottom: 40px;
}

.advantages-section h3 {
  margin-bottom: 16px;
  color: #1890ff;
}

.advantage-item {
  text-align: center;
  padding: 16px;
}

.advantage-item h4 {
  margin: 12px 0 8px 0;
  color: #262626;
}

.advantage-item p {
  margin: 0;
  color: #8c8c8c;
  font-size: 14px;
}

.action-buttons {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
  .code-comparison {
    flex-direction: column;
  }
}
</style>
